
<style type="text/css">
	.chartHeight{ height:320px;}
	.tab .single{ display: none; height:120px; overflow: auto}
</style>

<div class="row">
	<div class="col-xs-6 col-sm-6">
		<h1 class="page-title txt-color-blueDark">
			<i class="fa fa-bar-chart-o fa-fw"></i> 
				班线时效统计图表
		</h1>
	</div>
	<div class="col-xs-6 col-sm-6">
		<div class="btn-group pull-right">
			<button class="btn dropdown-toggle btn-sm btn-default margin-top-10" id="reportrange">
				<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <i class="fa fa-caret-down"></i>
			</button>
			
		</div>
		<div class="pull-right margin-top-10" style="padding-top:5px">统计时间：</div>
	</div>
</div>
<section id="widget-grid" class="">
	<div class="row">
		
		<article class="col-xs-12"> 
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-colorbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 线路准点率分析 </h2>
					<div class="widget-toolbar">
						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-default" id="">
								<i class="fa fa-gear fa-fw"></i> 编辑图表 
							</button>
						</div>
					</div>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->
					<!-- widget content -->
					<div class="widget-body" style="overflow:hidden">
						<div id="chart0" class="chartHeight"></div>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
		</article>
		<article class="col-xs-12"> 
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-1" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-colorbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 车辆准点率分析 </h2>
					<div class="widget-toolbar">
						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-default" id="">
								<i class="fa fa-gear fa-fw"></i> 编辑图表 
							</button>
						</div>
					</div>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->
					<!-- widget content -->
					<div class="widget-body" style="overflow:hidden">
						<div id="chart1" class="chartHeight"></div>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
		</article>
		<article class="col-xs-12"> 
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-2" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-colorbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 站点效率分析 </h2>
					<div class="widget-toolbar">
						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-default" id="">
								<i class="fa fa-gear fa-fw"></i> 编辑图表 
							</button>
						</div>
					</div>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->
					<!-- widget content -->
					<div class="widget-body" style="overflow:hidden">
						<div id="chart2" class="chartHeight"></div>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
		</article>
	</div>
</section>
<!-- end widget grid -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" style="width:800px">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">发车准时率</h4>
			</div>
			<div class="modal-body">
				<div id="chart6" class="chartHeight" style="width:800px;height:500px"></div>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--================================================== -->

<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>

<!-- <script src="js/plugin/echarts/esl/esl.js"></script> -->
<script src="js/plugin/echarts/build/echarts-plain.js"></script>


<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();



	$(function(){
		var cb = function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            //alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
          }

          var optionSet1 = {
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),
            minDate: '01/01/2012',
            maxDate: '12/31/2014',
            dateLimit: { days: 60 },
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
               '今天': [moment(), moment()],
               '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               '过去7天': [moment().subtract(6, 'days'), moment()],
               '过去30天': [moment().subtract(29, 'days'), moment()],
               '本月': [moment().startOf('month'), moment().endOf('month')],
               '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            format: 'MM/DD/YYYY'
          };

          $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
          $('#reportrange').daterangepicker(optionSet1, cb);

		showChartsPrint();  初始化图表
	})

	var myChart;
    var myChart1;
    var myChart2;
	function showChartsPrint(param){
		chartBg = '#fff';
		chartYbg = ['#f7f7f7','#fff'] ;
		myChart = echarts.init(document.getElementById('chart0'));
		myChart1 = echarts.init(document.getElementById('chart1'));
		myChart2 = echarts.init(document.getElementById('chart2'));
		myChart.setOption(options['option0'], true);
		myChart1.setOption(options['option1'], true);
		myChart2.setOption(options['option2'], true);
		window.onresize = function(){
	    	myChart.resize && myChart.resize();
	    	myChart1.resize && myChart1.resize();
	    	myChart2.resize && myChart2.resize();
	    }
	}
	
var options = {
		
		option0:{
		    
		    legend: {
		        x : 'center',
		        y : 'top',
		        data:['发车准点率','到达准点率','运行准时率']
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        },
		        formatter: function (param){
		            return param[0][1] + '<br/>'
		                   + param[0][0] + ' : ' + param[0][2] +'%' + '<br/>'
		                   + param[1][0] + ' : ' + param[1][2] +'%' + '<br/>'
		                   + param[2][0] + ' : ' + param[2][2] +'%';
		        }
		    },
		    
		    toolbox: {
		        show : true,
		        feature : {
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : false,
		    dataZoom : {
		        show : true,
		        realtime: true,
		        start : 50,
		        end : 100
		    },
		    grid :{
			        x : '50',
			        x2 : '20',
			        y : '40',
			        y2 : '120'			    
			},
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : true,
		            data : ['北京-广州','北京-西安','北京-大连-沈阳','北京-无锡','北京-郑州','北京-齐齐哈尔','北京-成都','北京-徐州','北京-广州','北京-西安','北京-大连-沈阳','北京-无锡','北京-郑州','北京-齐齐哈尔','北京-成都','北京-徐州'],
		            
		            axisLabel : {
		                show:true,
		                interval: 'auto',    // {number}
		                rotate: 45
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#f2f2f2',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
            		boundaryGap: [0, 0.1],
		            min: 0,
		            max: 300,
		            precision: 1,
		            power: 50,
		            axisLabel : {
		                formatter: '{value}%'
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#ccc',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    series : [
		        {
		            name:'发车准点率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[78, 72, 68, 81, 92, 69, 72,85,86, 71, 76, 90, 80, 71, 82,89]
		        },
		        {
		            name:'到达准点率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[86, 71, 76, 90, 80, 71, 82,89,89, 67, 80, 77, 82, 54, 68,76]
		        },
		        {
		            name:'运行准时率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[89, 67, 80, 77, 82, 54, 68,76,78, 72, 68, 81, 92, 69, 72,85]
		            
		        }
		    ]
		},
		option1:{
		    
		    legend: {
		        x : 'center',
		        y : 'top',
		        data:['发车准点率','到达准点率','运行准时率']
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        },
		        formatter: function (param){
		            return param[0][1] + '<br/>'
		                   + param[0][0] + ' : ' + param[0][2] +'%' + '<br/>'
		                   + param[1][0] + ' : ' + param[1][2] +'%' + '<br/>'
		                   + param[2][0] + ' : ' + param[2][2] +'%';
		        }
		    },
		    
		    toolbox: {
		        show : true,
		        feature : {
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : false,
		    dataZoom : {
		        show : true,
		        realtime: true,
		        start : 50,
		        end : 100
		    },
		    grid :{
			        x : '50',
			        x2 : '20',
			        y : '40',
			        y2 : '60'			    
			},
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : true,
		            data : ['京H11110','京H28943','津Y92305','京H90894','京H24946','京H02348','京H10346','京H02438','京H24596','京H24358','京H24590','京H23549','京H23506','津Y92305','京H90894','京H24946'],
		            
		            axisLabel : {
		                show:true,
		                interval: 'auto',    // {number}
		                rotate: 0
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#f2f2f2',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
            		boundaryGap: [0, 0.1],
		            min: 0,
		            max: 300,
		            precision: 1,
		            power: 50,
		            axisLabel : {
		                formatter: '{value}%'
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#ccc',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    series : [
		        {
		            name:'发车准点率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[78, 72, 68, 81, 92, 69, 72,85,86, 71, 76, 90, 80, 71, 82,89]
		        },
		        {
		            name:'到达准点率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[86, 71, 76, 90, 80, 71, 82,89,89, 67, 80, 77, 82, 54, 68,76]
		        },
		        {
		            name:'运行准时率',
		            type:'bar',
		            stack: 'sum',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[89, 67, 80, 77, 82, 54, 68,76,78, 72, 68, 81, 92, 69, 72,85]
		            
		        }
		    ]
		},
		option2:{
		    title : {
		        text: '站点停留准时率统计',
		        x : 'center' ,
		        textStyle : {
		            fontSize : '14',
		            //fontFamily : '微软雅黑',
		            fontWeight : 'bold',
		            color : '#000'
		        }
		        
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    
		    toolbox: {
		        show : true,
		        feature : {
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : false,
		    dataZoom : {
		        show : true,
		        realtime: true,
		        start : 50,
		        end : 100
		    },
		    grid :{
			        x : '50',
			        x2 : '20',
			        y : '40',
			        y2 : '90'			    
			},
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : true,
		            data : ['北京站','天津站','广州站','上海站','无锡站','长沙站','大连站','苏州站','宁波站','厦门站','南京站','杭州站','沈阳站','尼尔站','东莞站','泰安站'],
		            
		            axisLabel : {
		                show:true,
		                interval: 'auto',    // {number}
		                rotate: 45
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#f2f2f2',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
            		boundaryGap: [0, 0.1],
		            min: 0,
		            max: 100,
		            precision: 1,
		            power: 10,
		            axisLabel : {
		                formatter: '{value}%'
		            },
		            splitLine : {
		                show: true,
		                lineStyle: {
		                    color: '#ccc',
		                    type: 'solid',
		                    width: 1
		                }
		            }
		        }
		    ],
		    series : [
		        {
		            name:'停留准时率',
		            type:'bar',
		            barCategoryGap: '50%',
		            itemStyle: {
		                normal: {
		                    label : {
		                        show: true, position: 'insideTop'
		                    }
		                }
		            },
		            data:[89, 67, 80, 77, 82, 54, 68,76,78, 72, 68, 81, 92, 69, 72,85]
		        }
		    ]
		}
		
	}
                    
    

	function showDetails(param){
		loadSrc("#amazon/amazon_report01.html");
	}
	function showDetails1(param){
		loadSrc("#amazon/amazon_report02.html");
	}
	function showDetails2(param){
		loadSrc("#amazon/amazon_report03.html");
	}
	function showDetails3(param){
		loadSrc("#amazon/amazon_report04.html");
	}
	function showDetails4(param){
		loadSrc("#amazon/amazon_report06.html");
	}
	function showDetails5(param){
		//loadSrc("#amazon/amazon_report05.html");

		$('#myModal').modal();
		 myChart_6.setOption(options['option6'], true);
	
	}

	function loadSrc(srcPath){
			window.location.href = srcPath;
			console.log(srcPath);
		}

</script>
</body>

</html>